<template>
  <div>{{name}}{{age}}</div>
</template>

<script>
  import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount} from 'vue'
  import {ref} from 'vue';
  import {useStore} from 'vuex'

  export default {
    name: "setup",
    setup() {
      const root = ref(null); //获取组件根元素

      const name = ref('ccc');
      const age = ref(22);

      const store = useStore()

      function increase() {
        console.log("increase方法调用");
        age.value += 1;
      }

      onBeforeMount(() => {
        // 在挂载前执行某些代码
        console.log(this);     //在setup中，this 指向的是 undefined

      })

      onMounted(() => {
        // 在挂载后执行某些代码
        console.log('在挂载后执行某些代码')

        // 获取数据
        console.log(name.value);
        console.log(age.value);

        //方法调用
        increase();

        //获取根元素
        console.log(root);

        //获取VUEX
        store.commit("changeName",'大狗')
        console.log(store.getters.name);
      })

      onBeforeUpdate(() => {
        // 在更新前前执行某些代码
      })

      onUpdated(() => {
        // 在更新后执行某些代码
      })

      onBeforeUnmount(() => {
        // 在组件销毁前执行某些代码
      })


      return {name, age}

    },

  }
</script>

<style scoped>

</style>